<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <script>
      /**
       * 快速创建圆弧
       * arc(x, y, radius, startAngle, endAngle, anticlockwise): 快速绘制圆弧
       * x: 圆弧中心点 x 坐标
       * y: 圆弧中心点 y 坐标
       * radius: 圆弧的半径
       * startAngle: 圆弧起始角度，以弧度计,圆心到最右边的点是0度，顺时针方向
       * endAngle: 圆弧终止角度，以弧度计，
       * anticlockwise: 可选，规定应该逆时针还是顺时针绘图，false为顺时针，true为逆时针
       * Math.PI: 表示半圆
      */
      const myCanvas = document.getElementById("myCanvas");
      const ctx = myCanvas.getContext("2d");
      ctx.beginPath();
      ctx.arc(100,100,50,0,Math.PI * 2 , false)
      // ctx.strokeStyle = 'pink'
      ctx.fillStyle = 'pink'
      ctx.closePath()

      // ctx.stroke()
      ctx.fill()
    </script>
  </body>
</html>